<template>
  <div>
    <div class="header">
      <el-button type="primary" @click="modalshowfn">增加</el-button>
      <div>
           <el-input
        placeholder="请输入姓名"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search" @click="gosearch"></el-button>

      </el-input>
      <el-button type="primary" @click="resetfn" style="margin-left:30px">重置</el-button>
      </div>
     
    </div>

    <el-table
      :data="arr.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器，告诉分页器一共有多少条数据，每页展示几条 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        layout="sizes , prev, pager, next"
        @current-change="changePage"
        :page-sizes="[5, 10, 15]"
        :total="arr.length"
      >
      </el-pagination>
      <!-- 弹窗 -->
      <el-dialog :title="isadd" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-input v-model="form.date" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="住址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="canclle">取 消</el-button>
          <el-button type="primary" @click="surefn">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 删除的弹框 -->
      <el-dialog
        title="您确定要删除吗？"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="delsurefn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      input3: "", // 搜锁框的值
      editIndex: 0, // 用于编辑第几条的下标
      delItem: {}, // 用于保存删除的这一条数据
      delIndex: 0, // 用于控制删除第几条
      isadd: "新增",
      centerDialogVisible: false, // 控制删除弹框的显示和隐藏
      dialogFormVisible: false, // 控制弹窗显示和隐藏的变量
      pageSize: 10, // 每页默认条数
      currentPage: 1, // 此变量是当前页码
      form: {
        name: "",
        date: "",
        address: "",
      },
      formLabelWidth: "120px",
    };
  },
  computed: {
    ...mapState(["arr"]),
  },
  methods: {
    ...mapMutations(["addfn", "delfn", "editfn","searchfn"]), // 把仓库里的方法拿过来了
    ...mapActions(["getlist"]),
    changePage(val) {
      // val 是页码
      console.log(val);
      this.currentPage = val;
    },
    handleSizeChange(val) {
      // 监听每页条数改变的事件
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    modalshowfn() {
      // 让弹窗显示
      this.dialogFormVisible = true;
      this.form = {};
      this.isadd = "新增";
    },
    canclle() {
      // 弹窗点击取消时候的函数
      this.form = {};
      this.dialogFormVisible = false;
    },
    surefn() {
      // 要去执行新增还是编辑的操作
      // 点击确定时候的函数
      console.log(this.form);
      this.dialogFormVisible = false;
      if (this.isadd === "新增") {
        this.addfn(this.form);
      } else if (this.isadd === "编辑") {
        // 将当前行的数据和当前行的下标合并为一个对象
        this.editfn(Object.assign({}, this.form, { index: this.editIndex })); // 调用的是仓库里mutaitions的方法
      }
    },
    handleEdit(index, row) {
      console.log(index, row);
      let newform = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
      this.isadd = "编辑";
      this.form = newform;
      this.editIndex = index;
    },
    handleDelete(index, row) {
      console.log(row, "row");
      this.delIndex = index;
      this.delItem = row;
      this.centerDialogVisible = true;

      // 删除和编辑的事件
      console.log(index, row);
    },
    delsurefn() {
      //删除弹框点击确定的时候
      this.delfn(this.delItem);
      this.centerDialogVisible = false;
    },
    gosearch () {
      console.log(this.input3)
      this.searchfn(this.input3)
    },
    resetfn () { // 重置
         this.getlist();
         this.input3 = ""
    }
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
}
.input-with-select {
  width: 300px;
}
</style>